<template>
  <div class="video-list-page">
    <t-form
      ref="form"
      :data="formData"
      :label-width="100"
      colon
      @submit="onSubmit"
      @reset="onReset"
      class="search-form"
    >
      <t-row :gutter="[16, 24]">
        <t-col :span="8">
          <t-form-item label="笔记id" name="note_id" required>
            <t-input v-model="formData.note_id" placeholder="请输入笔记id" />
          </t-form-item>
        </t-col>
        <t-col :span="8" class="operation-container">
          <t-button theme="primary" type="submit">查询</t-button>
          <t-button type="reset" variant="base" theme="default">重置</t-button>
        </t-col>
      </t-row>
    </t-form>

    <!-- 视频列表展示 -->
    <template v-if="pagination.total > 0 && !dataLoading">
      <div class="video-list">
        <t-row :gutter="[16, 16]">
          <t-col
            :lg="6"
            :md="8"
            :sm="12"
            v-for="video in paginatedVideos"
            :key="video.id"
          >
            <video-card :video="video" @playVideo="handlePlayVideo" />
          </t-col>
        </t-row>
      </div>
      <div class="video-pagination">
        <t-pagination
          v-model="pagination.current"
          :total="pagination.total"
          :page-size-options="[10, 20, 50]"
          :page-size.sync="pagination.pageSize"
          @page-size-change="handlePageChange"
          @current-change="onCurrentChange"
        />
      </div>
    </template>
    <div v-else-if="dataLoading" class="video-loading">
      <t-loading text="加载中..." size="small"></t-loading>
    </div>
    <div v-else class="no-data">
      <t-empty description="暂无视频数据" />
    </div>

    <!-- 视频播放弹窗 -->
    <t-dialog
      :visible.sync="isVideoModalVisible"
      title="视频播放"
      width="800px"
      :destroy-on-close="true"
    >
      <video-player v-if="selectedVideo" :video="selectedVideo" />
      <template #footer>
        <t-button theme="primary" @click="isVideoModalVisible = false">关闭</t-button>
      </template>
    </t-dialog>
  </div>
</template>

<script>
import VideoCard from './components/VideoCard.vue';
import VideoPlayer from './components/VideoPlayer.vue';

export default {
  components: {
    VideoCard,
    VideoPlayer,
  },
  data() {
    return {
      formData: {
        note_id: '',
      },
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0,
      },
      videos: [],
      dataLoading: false,
      isVideoModalVisible: false,
      selectedVideo: null,
    };
  },
  computed: {
    paginatedVideos() {
      const start = this.pagination.pageSize * (this.pagination.current - 1);
      const end = this.pagination.pageSize * this.pagination.current;
      return this.videos.slice(start, end);
    },
  },
  mounted() {
    this.fetchVideos();
  },
  methods: {
    async fetchVideos(page = 1) {
      this.dataLoading = true;
      try {
        const params = {
          note_id: this.formData.note_id,
          page,
          page_size: this.pagination.pageSize,
        };
        const response = await this.$request.get('/xhs/videos/', { params });
        if (response.status === 200) {
          this.videos = response.data.results;
          this.pagination.total = response.data.total;
          this.pagination.current = response.data.current_page;
        } else {
          this.$message.warning('获取视频数据失败');
        }
      } catch (error) {
        console.error('获取视频数据失败:', error);
        this.$message.error('获取视频数据失败');
      } finally {
        this.dataLoading = false;
      }
    },
    onSubmit() {
      this.fetchVideos(1);
    },
    onReset() {
      this.formData = {
        keyword: '',
        publish_date: '',
      };
      this.pagination.current = 1;
      this.fetchVideos(1);
    },
    handlePageChange(page) {
      this.fetchVideos(page);
    },
    onCurrentChange(current) {
      this.pagination.current = current;
      this.fetchVideos(current);
    },
    handlePlayVideo(video) {
      this.selectedVideo = video;
      this.isVideoModalVisible = true;
    },
  },
};
</script>

<style scoped>
.video-list-page {
  padding: 24px;
}

.search-form {
  margin-bottom: 16px;
}

.operation-container {
  display: flex;
  align-items: flex-end;
}

.video-list {
  margin-top: 16px;
}

.video-pagination {
  margin-top: 24px;
  text-align: center;
}

.video-loading,
.no-data {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}
</style> 